/**
 * Created by Administrator on 2018/11/13.
 */
var category = ['07:00','10:00','13:00','14:00','16:00','17:00','19:00','20:00','22:00','00:00'];
var dottedBase = +new Date();
var lineData = [];
var barData = [];

for (var i = 0; i < 20; i++) {
    var date = new Date(dottedBase += 1000 * 3600 * 24);
    // category.push([
    //     date.getFullYear(),
    //     date.getMonth() + 1,
    //     date.getDate()
    // ].join('-'));
    var b = Math.random() * 200;
    var d = Math.random() * 200;
    barData.push(b)
    lineData.push(d + b);

}
// console.log(barData)
// console.log(lineData)

// option
var option5 = {
    backgroundColor: 'transparent',
    title: [
        {
            text: '文章阅读趋势',
            x: '20',
            y: '10',
            textStyle: {
                color: '#5ff9ff',
                fontSize: 16
            }
        }
    ],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
            label: {
                show: true,
                backgroundColor: '#333'
            }
        }
    },
    grid: {
        left: '15%',
        right: '2%',
        bottom: '0%',
        top: '20%',
        height: '78%',
        containLabel: true,
        z: 22
    },
    // ,    legend: {
    //     data: ['line', 'bar'],
    //     textStyle: {
    //         color: '#ccc'
    //     }
    // },
    xAxis: {
        data: category,
        axisLine: {
            lineStyle: {
                color: '#ccc'
            }
        }
    },
    yAxis: {
        splitLine: {show: false},
        axisLine: {
            lineStyle: {
                color: '#ccc'
            }
        }
    },
    series: [
        {
        name: 'line',
        type: 'line',
        smooth: true,
        showAllSymbol: false,
        // symbol: 'emptyCircle',
        symbolSize: 15,
        data: lineData
    },
    // , {
    //     name: 'bar',
    //     type: 'bar',
    //     barWidth: 10,
    //     itemStyle: {
    //         normal: {
    //             barBorderRadius: 5,
    //             color: new echarts.graphic.LinearGradient(
    //                 0, 0, 0, 1,
    //                 [
    //                     {offset: 0, color: '#14c8d4'},
    //                     {offset: 1, color: '#43eec6'}
    //                 ]
    //             )
    //         }
    //     },
    //     data: barData
    // },
    //     {
    //     name: 'line',
    //     type: 'bar',
    //     barGap: '-100%',
    //     barWidth: 10,
    //     itemStyle: {
    //         normal: {
    //             color: new echarts.graphic.LinearGradient(
    //                 0, 0, 0, 1,
    //                 [
    //                     {offset: 0, color: 'rgba(20,200,212,0.5)'},
    //                     {offset: 0.2, color: 'rgba(20,200,212,0.2)'},
    //                     {offset: 1, color: 'rgba(20,200,212,0)'}
    //                 ]
    //             )
    //         }
    //     },
    //     z: -12,
    //     data: lineData
    // },
        {
        name: 'dotted',
        type: 'pictorialBar',
        symbol: 'line',
        itemStyle: {
            normal: {
                color: '#0f375f'
            }
        },
        symbolRepeat: true,
        symbolSize: [6, 4],
        symbolMargin: 0,
        z: -10,
        data: lineData
    }]
};
var myChart5 =echarts.init(document.getElementById('echartListReading'))
myChart5.setOption(option5, true);
